<template>
	<!-- 程序主页 -->
	
 	<view style="margin-top: 140rpx; overflow-x: hidden;">
 		<!-- 顶部提示 -->
 		<u-top-tips ref="uTips"></u-top-tips>
 		<!-- 顶部框 -->
 		<view class="upper-box u-p-b-40">

 			<view class="u-flex u-col-center u-row-left  space-between">
 				<view class="u-p-l-20" style="font-weight:550;font-size:42rpx;letter-spacing:3rpx;">{{school.name}}</view>
				<u-image mode="widthFix" width=140rpx :src="school.img_src"></u-image>
 			</view>

 			<!--上测的横向四个按钮 -->
 			<!-- <view class="u-p-l-20 u-p-r-20">
 				<u-grid :col="4" :border="false">
 					<u-grid-item 
						v-for="item in navi"
						@click="navigateTo(item.url)"
						bg-color="transparent">

 						<view class="u-col-center u-row-center icon-background" style="box-shadow:0px 2px 6px rgba(0, 0, 0, .15);">
 							<u-image mode="widthFix" width=65rpx :src="item.icon"></u-image>
 						</view>
 						<view class="u-p-t-5" style="font-weight: 550;">{{ item.name }}</view>
 					</u-grid-item>
 				</u-grid>
 			</view> -->
			
			<TODO-Box :info="getTODOInfo" style="margin-top: 30rpx;"></TODO-Box>
			
			
			<view class="space-between" style="margin: 30rpx 0 30rpx;">
				<view v-for="item in getKitByPermission.quickMenu">
					<view class="quick-menu-item" @click="navigateTo(item.url)">
					
							<u-image style="position: absolute; user-select: none;" mode="heightFix" height=150rpx :src="item.icon"></u-image>
							
							<view class="right-corner"> {{ item.name }}</view>
							
						
						
					</view>
				</view>
				
			</view>
			

			

 		</view>
		
		

 		<!--中间的四个菜单 -->
 		<view class="padding" style="margin-top: -50rpx;" v-if="hasPermission">
 			<view class="flex flex-wrap u-col-center u-row-center">
 				<view 
					v-for="(item,index) in list" 
					class="list-box bg-white margin-xs radius"
					
					style="height:180rpx;width:640rpx;"
					@click="navigateTo(item.url)">
 					
					<view class="box-wrapper">
						<view class="flex-col" style="padding-left: 50rpx;">
							<view class="title">{{ item.name }} </view>
							<view class="desc">{{ item.desc}} </view>
						</view>
						<view>
							<u-image mode="widthFix" width=270rpx :src="item.icon"></u-image>
						</view>
						
					</view>
 				
 				</view>
 			</view>
 		</view>
		
		<news-scroll>
			
		</news-scroll>
		
		<!-- 一个弹出提示 -->		
		
		<transition name="slide-fade">	
			<view class="clockPromptWarpper" v-if="clockPromptShow===true">
				<view class="flex-col">
					<!-- <image style="height: 500rpx;" :src="clockPromptSrc"></image> -->
					
					<view class="promptu">
						你还没有进行健康打卡
					</view>
					<view class="flex-wrapper">
						<u-button type="error" @click="clockPromptShow = false">再等等</u-button>
						<u-button type="success" @click="toClock()">现在去</u-button>
					</view>
				</view>
				
			</view>
		</transition>
		
		
		
		
 	</view>
 </template>

 <script>
	 import newsScroll from '../../components/news-scroll.vue'
	 import TODOBox from '../../components/TODO-box.vue'
	 
export default {
	components: {
		newsScroll,
		TODOBox
	},
	onLoad() {
		
		
	},
	onShow() {
		// if  (!this.$store.state.access_token) {
		// 	uni.redirectTo({
		// 		url: '/pages/user/login'
		// 	})
		// 	return
		// }
		
		let tmp = uni.getStorageSync('lifeData')
		this.hasPermission = tmp === undefined ? false : tmp['permission']
		
		console.log('hasPermission', this.hasPermission)
		this.$u.api.isClocked().then(res => {
			if (res.data) {
				console.log("今日打了卡了")
				this.clockPromptShow = false
			} else {
				this.clockPromptShow = true
			}
		}).catch(err => {
			console.log(err)
			// uni.redirectTo({
			// 	url: '/pages/user/login'
			// })
		})
	},
	methods: {
		navigateTo: function(url) {
			console.log("to", url)
			if (url == '') {
				this.$refs.uTips.show({
					title: '敬请期待',
					type: 'error',
					duration: '2300'
				})
				return
			}
			uni.navigateTo({
				url: url
			});
		},
		toClock: function() {
			uni.navigateTo({
				url: "/pages/clock/index"
			})
		}
	},
	
	computed: {
		
		getKitByPermission: function() {
			if (this.$store.state.permission) {
				return this.kit.mentor
			} else {
				return this.kit.student
			}
		},
		getTODOInfo: function() {
			if (this.$store.state.permission) { 
				return {
					key1: '三进',
					val1: '2/5',
					url1: '/pages/trienter/trienter',
					
					val2: '2/5',
					url2: '/pages/leave_statistics/index'
				}
			}
			else {
				return {
					key1: '打卡',
					val1: '✔',
					url1: '/pages/clock/index',
					
					val2: '2/5',
					url2: '/pages/leave_statistics/index'
				}
			}
			
			
		},
		// navi: function() {
		// 	//自定义可视规则 老师看不到打卡
		// 	let n = 0
		// 	let res = []
		// 	while (res.length < 4) {
		// 		// console.log(this.navi_all[n].visible)
		// 		if (this.navi_all[n].visible && this.hasPermission) {
		// 			// 满足条件添加如菜单
		// 		} else {
		// 			res.push(this.navi_all[n])
		// 		}
		// 		n++
		// 	}
		
		// 	return res
		// }
	},
	data() {
		return {
			clockPromptShow: false,
			clockPromptSrc: '/static/clock_prompt.png',
			hasPermission: false,
			school: {
				name: "长沙理工大学",
				img_src: '/static/index_icon/CSUST.jpg'
			},
			
			
			navi_all: [{
					name: "请假",
					icon: "/static/index_icon/1_leave.png",
					url: "/pages/leave/index",
					visible: false
				},
				{
					name: "新功能",
					icon: "/static/index_icon/2_list.png",
					url: "",
					visible: false
				},
				{
					name: "健康打卡",
					icon: "/static/index_icon/3_heart.png",
					url: "/pages/clock/index",
					visible: true
				},
				{
					name: "新功能",
					icon: "/static/index_icon/4_community.png",
					url: "",
					visible: false
				},
				{
					name: "新功能",
					icon: "/static/index_icon/4_community.png",
					url: "",
					visible: false
				}
			],
			
			// kit中保存不同角色的各个内容
			kit: {
				student: {
					quickMenu: [
						{
							name: '去打卡',
							url: '/pages/clock/index',
							icon: '/static/index_icon/quick-menu-1.png'
						},
						{
							name: '请假',
							url: '/pages/leave/index',
							icon: '/static/index_icon/quick-menu-2.png'
						}
					]
				},
				mentor: {
					quickMenu: [
						{
							name: '去三进',
							url: '/pages/trienter/trienter',
							icon: '/static/index_icon/quick-menu-1.png'
						},
						{
							name: '请假',
							url: '/pages/leave/index',
							icon: '/static/index_icon/quick-menu-2.png'
						}
					]
				}
			},
			
			//  visible指导航针对不同权限用户用户的可见情况
			list: [{
					name: "我的审批列表",
					icon: "/static/index_icon/1.png",
					url: "/pages/leave_statistics/index",
					desc: "查看、管理我的审批",
					visible: false
				},
				{
					name: "健康打卡情况",
					icon: "/static/index_icon/2.png",
					url: "/pages/clock_statistics/index",
					desc: "查看部门打卡信息",
					visible: true
				},
				// {
				// 	name: "三进助手",
				// 	icon: "/static/index_icon/3.png",
				// 	url: "/pages/trienter/trienter",
				// 	desc: "",
				// 	visible: true
				// },
				{
					name: "三进情况",
					icon: "/static/index_icon/4.png",
					url: "/pages/trienter_statistics/index",
					desc: "查看教师的三进日常",
					visible: true
				}
			],
	
		}
	},
}
 </script>

 <style lang="scss">
	 .uni-page-head {
		 background-color: #FBFAFA;
	 }
	 
 	page {
 		// background: linear-gradient(to bottom right, #ffffff, #efefef);
		background-color: #FBFAFA;
		overflow-x: hidden;
 		// 顶部
 		.upper-box {
			background-color: #FBFAFA;
			padding: 0 60rpx;
 			// background: linear-gradient(to bottom, #ffffff, #f1f3fa);
 		}
 	}
	
	.right-corner {
		padding: 10rpx 5rpx;
		letter-spacing: 2rpx;
		text-align: right;
		
	}

 	.icon-background {
 		padding: 35rpx;
 		// background-color: #EAECF1;
		
 		border-radius: 80rpx;
 	}

 	.list-font {
 		font-weight: 600;
 		font-size: 15px;
 		letter-spacing: 1.5px;
 		margin-bottom: 1rpx;
 	}

 	.list-box {
 		border-radius: 6px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
 	}
	
	.quick-menu-item {
		background-color: white;
		width: 230rpx;
		height: 150rpx;
		border-radius: 6px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
	}
	
	.box-wrapper {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
	}
	
	.title {
		font-size: 18px;
		letter-spacing: -0.02em;
		margin: -3px 0px 5px;
		color: black;
	
	}
	
	.desc {
		font-size: 11px;
		letter-spacing: -0.02em;
		color: #787878;
	}
	
	.visible {
		display: none;
	}
	
	.clockPromptWarpper {
		overflow: hidden;
		border-top-right-radius: 45rpx;
		border-top-left-radius: 45rpx;
	
		position: fixed;
		bottom: 0;
		z-index: 1111;
		width: 100%;
		padding: 30rpx 0rpx;
		
		box-shadow: 0px -13rpx 8px rgba(0,0,0,0.1);
		// height: 700rpx;
		background-color: #fff;
		justify-content: center;
	}
	.flex-col {
		display: flex;
		flex-direction: column;
		
	}
	.promptu {
		// padding: 10rpx 30rpx;
		text-align: center;
		font-size: 17px;
		margin-bottom: 30rpx;
	}
	
	.flex-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
	}

	// animation
	.slide-fade-enter-active {
	  transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all 1.3s ease;
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
	  transform: translateY(400rpx);
	  // opacity: 0;
	}
 </style>
